<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				font-size: 25px;
				color: greenyellow;
			}
			.b1 li{
				line-height: 50px;
			}
			body>ul{
				font-size: 30px;
				font-family: "微软雅黑";
				color: palevioletred;
			}
			
		</style>
	</head>
	<body>
		<ul onclick="trees('a1')">文学书籍</ul>
				<ul class="b1" id="a1" style="display: none;">
					<li>三国演义</li>
					<li>水浒传</li>
					<li>红楼梦</li>
				</ul>
		<ul onclick="trees('a2')">唐诗宋词</ul>
				<ul id="a2" class="b1" style="display: none;">
					<li>鹅鹅鹅</li>
					<li>静夜思</li>
					<li>茅屋为秋风所破歌</li>
				</ul>
		<ul onclick="trees('a3')">玄幻小说</ul>
				<ul id="a3" class="b1" style="display: none;">
					<li>神兵小将</li>
					<li>神奇宝贝</li>
					<li>数码宝贝</li>
				</ul>
	</body>
	<script type="text/javascript">
		function trees(obj){
			var ul = document.getElementById(obj)
			var uldis = ul.style.display
			if(uldis=="none"){
				ul.style.display="block";
			}
			if(uldis=="block"){
				ul.style.display="none";
			}
		}		
	</script>
</html>
